
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
<div class="archive_info">
<h1>HTML <span class="color_h1">表单和输入</span></h1>
<hr/>
<p class="intro">HTML 表单用于收集用户的输入信息。</p>
<p>HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。</p>
<hr/>
<div class="tryit_ex">
<img alt="Examples" decoding="async" height="46px" src="/images/tryitimg.gif" width="40"/>
<h2>在线实例</h2>
</div>
<div class="example"><h2 class="example">实例</h2><p>以下实例创建了一个表单，包含两个输入框：<div class="example_code">
&lt;form action=""&gt;<br/>
First name: &lt;input type="text" name="firstname"&gt;&lt;br&gt;<br/>
Last name: &lt;input type="text" name="lastname"&gt;<br/>
&lt;/form&gt;<br/>
</div><br/><a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a></p></div>
<div class="example"><h2 class="example">实例</h2><p>以下实例创建了一个表单，包含一个普通输入框和一个密码输入框：<div class="example_code">
&lt;form action=""&gt;<br>
Username: &lt;input type="text" name="user"&gt;&lt;br&gt;<br/>
Password: &lt;input type="password" name="password"&gt;<br/>
&lt;/form&gt;<br/>
</br></div><br/><a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a></p></div>
<p>（在本页底端可以找到更多实例。）</p>
<hr/>
<h2>HTML 表单</h2>
<p>表单是一个包含表单元素的区域。</p>
<p>表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等。</p>
<p>我们可以使用 <span class="marked">&lt;form&gt;</span> 标签来创建表单:</p>
<div class="example"><h2 class="example">实例</h2> <div class="example_code">
&lt;form&gt;<br>
.<br/>
input 元素<br/>
.<br/>
&lt;/form&gt;<br/>
</br></div></div>
<hr/>
<h2>HTML 表单 - 输入元素</h2>
<p>多数情况下被用到的表单标签是输入标签 <span class="marked">&lt;input&gt;</span>。</p><p>输入类型是由 <span class="marked">type</span> 属性定义。</p><p>接下来我们介绍几种常用的输入类型。</p>
<hr/>
<h2>文本域（Text Fields）</h2>
<p>文本域通过 <span class="marked">&lt;input type="text"&gt;</span> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。</p>
<div class="example"><h2 class="example">实例</h2> <div class="example_code">
&lt;form&gt;<br/>
First name: &lt;input type="text" name="firstname"&gt;&lt;br&gt;<br/>
Last name: &lt;input type="text" name="lastname"&gt;<br/>
&lt;/form&gt;<br/>
</div></div>
<p>浏览器显示如下：</p>
<form action="">
First name: <input name="firstname" size="20" type="text"/><br/>
Last name: <input name="lastname" size="20" type="text"/>
</form>
<p><b> 注意:</b>表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。
</p>
<hr/>
<h2>密码字段</h2>
<p>密码字段通过标签 <span class="marked">&lt;input type="password"&gt;</span> 来定义:</p>
<div class="example"><h2 class="example">实例</h2> <div class="example_code">
&lt;form&gt;<br>
Password: &lt;input type="password" name="pwd"&gt;<br/>
&lt;/form&gt;<br/>
</br></div></div>
<p>浏览器显示效果如下:</p>
<form action="">
Password: <input name="pwd" type="password"/>
</form>
<p><b>注意：</b>密码字段字符不会明文显示，而是以星号 <span class="marked">*</span> 或圆点 <span class="marked">.</span> 替代。</p>
<hr/>
<h2>单选按钮（Radio Buttons）</h2>
<p><span class="marked">&lt;input type="radio"&gt;</span> 标签定义了表单的单选框选项:</p>
<div class="example"><h2 class="example">实例</h2> <div class="example_code">
&lt;form action=""&gt;<br/>
&lt;input type="radio" name="sex" value="male"&gt;男&lt;br&gt;<br/>
&lt;input type="radio" name="sex" value="female"&gt;女<br/>
&lt;/form&gt;<br/>
</div></div>
<p>浏览器显示效果如下:</p>
<form action="">
<input name="sex" type="radio" value="male"/>男<br/>
<input name="sex" type="radio" value="female"/>女
</form>
<hr/>
<h2>复选框（Checkboxes）</h2>
<p><span class="marked">&lt;input type="checkbox"&gt;</span> 定义了复选框。</p>
<p>复选框可以选取一个或多个选项：</p>
<div class="example"><h2 class="example">实例</h2> <div class="example_code">
&lt;form&gt;<br>
&lt;input type="checkbox" name="vehicle" value="Bike"&gt;我喜欢自行车&lt;br&gt;<br/>
&lt;input type="checkbox" name="vehicle" value="Car"&gt;我喜欢小汽车<br/>
&lt;/form&gt;<br/>
</br></div></div>
<p>浏览器显示效果如下:</p>
<form action="">
<input name="vehicle" type="checkbox" value="Bike"/>我喜欢自行车<br/>
<input name="vehicle" type="checkbox" value="Car"/>我喜欢小汽车
</form>
<hr/>
<h2>提交按钮(Submit)</h2>
<p><span class="marked">&lt;input type="submit"&gt;</span> 定义了提交按钮。</p>
<p>当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 <span class="marked">action</span> 定义了服务端的文件名。</p><p><span class="marked">action</span> 属性会对接收到的用户输入数据进行相关的处理:</p>
<div class="example"><h2 class="example">实例</h2> <div class="example_code">
&lt;form name="input" action="html_form_action.php" method="get"&gt;<br>
Username: &lt;input type="text" name="user"&gt;<br/>
&lt;input type="submit" value="Submit"&gt;<br/>
&lt;/form&gt;<br/>
</br></div></div>
<p>浏览器显示效果如下:</p>
<form action="/try/demo_source/html_form_action.php" method="get" name="input0" target="_blank">
Username: <input name="user" size="20" type="text"/><input type="submit" value="Submit"/>
</form>
<p>
假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 <strong>html_form_action.php</strong> 文件，该页面将显示出输入的结果。
</p>
<p>以上实例中有一个 method 属性，它用于定义表单数据的提交方式，可以是以下值：</p>
<ul><li>
<p><span class="marked">post</span>：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。</p></li><li>
<p><span class="marked">get</span>：默认值，指的是 HTTP GET 方法，表单数据会附加在 <span class="marked">action</span> 属性的 URL 中，并以 <span class="marked">?</span>作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。</p>
</li></ul>
<div class="example"><h2 class="example">实例</h2> <div class="example_code">
&lt;!-- 以下表单使用 GET 请求发送数据到当前的 URL，method 默认位 GET。 --&gt;<br/>
&lt;form&gt;<br/>
  &lt;label&gt;Name:<br/>
    &lt;input name="submitted-name" autocomplete="name"&gt;<br/>
  &lt;/label&gt;<br/>
  &lt;button&gt;Save&lt;/button&gt;<br/>
&lt;/form&gt;<br/>
<br/>
&lt;!-- 以下表单使用 POST 请求发送数据到当前的 URL。 --&gt;<br/>
&lt;form method="post"&gt;<br/>
  &lt;label&gt;Name:<br/>
    &lt;input name="submitted-name" autocomplete="name"&gt;<br/>
  &lt;/label&gt;<br/>
  &lt;button&gt;Save&lt;/button&gt;<br/>
&lt;/form&gt;<br/>
<br/>
&lt;!-- 表单使用 fieldset, legend, 和 label 标签 --&gt;<br/>
&lt;form method="post"&gt;<br/>
  &lt;fieldset&gt;<br/>
    &lt;legend&gt;Title&lt;/legend&gt;<br/>
    &lt;label&gt;&lt;input type="radio" name="radio"&gt; Select me&lt;/label&gt;<br/>
  &lt;/fieldset&gt;<br/>
&lt;/form&gt;<br/>
</div></div>
<hr/>
<h2>
<img align="middle" alt="Try it" border="0" decoding="async" height="46" src="/images/tryitpic.gif" width="44"/>
更多实例</h2>
<p><a  rel="noopener noreferrer" target="_blank">单选按钮(Radio buttons)</a><br/>
本例演示如何在 HTML 中创建单选按钮。</p>
<p><a  rel="noopener noreferrer" target="_blank">复选框(Checkboxes)</a><br/>
本例演示如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。</p>
<p><a  rel="noopener noreferrer" target="_blank">简单的下拉列表</a><br/>
本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。</p>
<p><a  rel="noopener noreferrer" target="_blank">预选下拉列表</a><br/>
本例演示如何创建一个简单的带有预选值的下拉列表。</p>
<p><a  rel="noopener noreferrer" target="_blank">文本域(Textarea)</a><br/>
本例演示如何创建文本域（多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受限制。</p>
<p><a  rel="noopener noreferrer" target="_blank">创建按钮</a><br/>
本例演示如何创建按钮。你可以对按钮上的文字进行自定义。</p>
<h2>
<img align="middle" alt="Try it" border="0" decoding="async" height="46" src="/images/tryitpic.gif" width="44"/>
表单实例</h2>
<p><a  rel="noopener noreferrer" target="_blank">带边框的表单</a><br/>
本例演示如何在数据周围绘制一个带标题的框。</p>
<p><a  rel="noopener noreferrer" target="_blank">带有输入框和确认按钮的表单</a><br/>
本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。</p>
<p><a  rel="noopener noreferrer" target="_blank">带有复选框的表单</a><br/>
此表单包含两个复选框和一个确认按钮。</p>
<p><a  rel="noopener noreferrer" target="_blank">带有单选按钮的表单</a><br/>
此表单包含两个单选框和一个确认按钮。</p>
<p><a  rel="noopener noreferrer" target="_blank">从表单发送电子邮件</a><br/>
此例演示如何从表单发送电子邮件。</p>
<hr/>
<h2>HTML 表单标签</h2>
<p><span class="new" style="float:left;">New</span> : HTML5新标签</p>
<table class="reference">
<tbody><tr>
<th align="left">标签</th>
<th align="left">描述</th>
</tr>
<tr>
<td><a  rel="noopener noreferrer" target="_blank">&lt;form&gt;</a></td>
<td> 定义供用户输入的表单</td>
</tr>
<tr>
<td><a  rel="noopener noreferrer" target="_blank">&lt;input&gt;</a></td>
<td>定义输入域</td>
</tr>
<tr>
<td><a  rel="noopener noreferrer" target="_blank">&lt;textarea&gt;</a></td>
<td>定义文本域 (一个多行的输入控件)</td>
</tr>
<tr>
<td><a  rel="noopener noreferrer" target="_blank">&lt;label&gt;</a></td>
<td>定义了 &lt;input&gt; 元素的标签，一般为输入标题</td>
</tr>
<tr>
<td><a  rel="noopener noreferrer" target="_blank">&lt;fieldset&gt;</a></td>
<td>定义了一组相关的表单元素，并使用外框包含起来</td>
</tr>
<tr>
<td><a  rel="noopener noreferrer" target="_blank">&lt;legend&gt;</a></td>
<td>定义了  &lt;fieldset&gt; 元素的标题</td>
</tr>
<tr>
<td><a  rel="noopener noreferrer" target="_blank">&lt;select&gt;</a></td>
<td>定义了下拉选项列表</td>
</tr>
<tr>
<td><a  rel="noopener noreferrer" target="_blank">&lt;optgroup&gt;</a></td>
<td>定义选项组</td>
</tr>
<tr>
<td><a  rel="noopener noreferrer" target="_blank">&lt;option&gt;</a></td>
<td>定义下拉列表中的选项</td>
</tr>
<tr>
<td><a  rel="noopener noreferrer" target="_blank">&lt;button&gt;</a></td>
<td>定义一个点击按钮</td>
</tr>
<tr>
<td><a  rel="noopener noreferrer" target="_blank">&lt;datalist&gt;</a><span class="new">New</span></td>
<td>指定一个预先定义的输入控件选项列表</td>
</tr>
<tr>
<td><a  rel="noopener noreferrer" target="_blank">&lt;keygen&gt;</a><span class="new">New</span></td>
<td>定义了表单的密钥对生成器字段</td>
</tr>
<tr>
<td><a  rel="noopener noreferrer" target="_blank">&lt;output&gt;</a><span class="new">New</span></td>
<td>定义一个计算结果</td>
</tr>
</tbody></table> <div class="scroll-top"><a >返回顶部</a></div>
</div>

    </body>
    </html>
    